import React, { useEffect } from 'react';
import {
  CircleNotch,
  FileCode,
  FileCsv,
  FileDoc,
  FileHtml,
  FileText,
  FileImage,
  FilePdf,
  WarningOctagon,
  X,
} from "@phosphor-icons/react";
import { humanFileSize } from "@/utils/numbers";
import { REMOVE_ATTACHMENT_EVENT } from "../../DnDWrapper";
// import { Tooltip } from "react-tooltip";
import Icon from "@/media/chat/icon.png";
import Pdf from "@/media/chat/pdf.png";
import Ppt from "@/media/chat/ppt.png";
import Video from "@/media/chat/video.png";
import Word from "@/media/chat/word.png";
import Xls from "@/media/chat/xls.png";

import { message } from "antd";
/**
 * @param {{attachments: import("../../DnDWrapper").Attachment[]}}
 * @returns
 */
export default function AttachmentManager({ attachments }) {
  if (attachments.length === 0) return null;
  return (
    <div className="flex flex-wrap mb-3 gap-[8px]">
      {attachments.map((attachment) => (
        <AttachmentItem key={attachment.uid} attachment={attachment} />
      ))}
    </div>
  );
}

/**
 * @param {{attachment: import("../../DnDWrapper").Attachment}}
 */
function AttachmentItem({ attachment }) {
  const { uid, file, status, error, document, type, contentString } =
    attachment;
  const { iconBgColor, Icon } = displayFromFile(file);
  useEffect(() => {
    if (!Icon) {
      message.warning("暂不支持上传该类型文件");
      return;
    }
  }, [Icon]);
  function removeFileFromQueue() {
    window.dispatchEvent(
      new CustomEvent(REMOVE_ATTACHMENT_EVENT, { detail: { uid, document } })
    );
  }

  // if (status === "in_progress") {
  //   return (
  //     <div
  //       className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px]`}
  //     >
  //       <div
  //         className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
  //       >
  //         <CircleNotch
  //           size={30}
  //           className="text-white light:text-white animate-spin"
  //         />
  //       </div>
  //       <div className="flex flex-col w-[130px]">
  //         <p className="text-white text-xs font-medium truncate">{file.name}</p>
  //         <p className="text-white/60 text-xs font-medium">
  //           {humanFileSize(file.size)}
  //         </p>
  //       </div>
  //     </div>
  //   );
  // }

  // if (status === "failed") {
  //   return (
  //     <>
  //       <div
  //         data-tooltip-id={`attachment-uid-${uid}-error`}
  //         data-tooltip-content={error}
  //         className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
  //       >
  //         <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
  //           <button
  //             onClick={removeFileFromQueue}
  //             type="button"
  //             className="light:bg-white bg-zinc-700 hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
  //           >
  //             <X size={10} className="flex-shrink-0" />
  //           </button>
  //         </div>
  //         <div
  //           className={`bg-error rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
  //         >
  //           <WarningOctagon size={30} className="text-white light:text-white" />
  //         </div>
  //         <div className="flex flex-col w-[130px]">
  //           <p className="text-white light:text-red-600 text-xs font-medium truncate">
  //             {file.name}
  //           </p>
  //           <p className="text-red-100 light:text-red-600 text-xs truncate">
  //             {error ?? "this file failed to upload"}. It will not be available
  //             in the workspace.
  //           </p>
  //         </div>
  //       </div>
  //       <Tooltip
  //         id={`attachment-uid-${uid}-error`}
  //         place="top"
  //         delayShow={300}
  //         className="allm-tooltip !allm-text-xs"
  //       />
  //     </>
  //   );
  // }
  if (Icon) {
    return (
      <>
        <div
          data-tooltip-id={`attachment-uid-${uid}-success`}
          data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
          className={`relative h-14 px-[8px] py-[4px] flex items-center rounded-lg light:chat-file-list w-[158px] h-[48px] chat-file-list group`}
        >
          <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10] truncate">
            <button
              onClick={removeFileFromQueue}
              type="button"
              className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
            >
              <X size={10} className="flex-shrink-0" />
            </button>
          </div>
          {/* 是否有文件缩略图 */}
          {/* {contentString ? (
            <img
              src={contentString}
              className={`${iconBgColor} w-[40px] h-[40px] rounded-lg flex items-center justify-center`}
            />
          ) : (
            <div
              className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
            >
              <Icon size={30} className="text-white light:text-white" />
            </div>
          )} */}
          <img
            src={Icon}
            className={`w-[40px] h-[40px] rounded-lg flex items-center justify-center`}
          />

          <div className="flex flex-col flex-1 ml-[2px] truncate">
            <p className="w-full text-xs font-semibold chat-input-text truncate">
              {file.name}
            </p>
            <p className="w-full light:chat-file-text chat-file-text text-xs truncate">
              {humanFileSize(file.size)}
            </p>
          </div>
        </div>
        {/* <Tooltip
          id={`attachment-uid-${uid}-success`}
          place="top"
          delayShow={300}
          className="allm-tooltip !allm-text-xs"
        /> */}
      </>
    );
  }

  // return (
  //   <>
  //     <div
  //       data-tooltip-id={`attachment-uid-${uid}-success`}
  //       data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
  //       className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
  //     >
  //       <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
  //         <button
  //           onClick={removeFileFromQueue}
  //           type="button"
  //           className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
  //         >
  //           <X size={10} className="flex-shrink-0" />
  //         </button>
  //       </div>
  //       <div
  //         className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
  //       >
  //         <Icon size={30} className="text-white light:text-white" />
  //       </div>
  //       <div className="flex flex-col w-[130px]">
  //         <p className="text-white text-xs font-medium truncate">{file.name}</p>
  //         <p className="text-white/80 light:text-black/80 text-xs font-medium">
  //           File embedded!
  //         </p>
  //       </div>
  //     </div>
  //     <Tooltip
  //       id={`attachment-uid-${uid}-success`}
  //       place="top"
  //       delayShow={300}
  //       className="allm-tooltip !allm-text-xs"
  //     />
  //   </>
  // );
}

/**
 * @param {File} file
 * @returns {{iconBgColor:string, Icon: React.Component}}
 */
function displayFromFile(file) {
  const extension = file?.name?.split(".")?.pop()?.toLowerCase() ?? "txt";
  switch (extension) {
    case "pdf":
      return { iconBgColor: "bg-magenta", Icon: Pdf };
    case "doc":
    case "docx":
      return { iconBgColor: "bg-royalblue", Icon: Word };
    case "csv":
    case "xls":
    case "xlsx":
      return { iconBgColor: "bg-success", Icon: Xls };
    case "png":
    case "jpg":
    case "jpeg":
    case "svg":
    case "gif":
      return { iconBgColor: "bg-royalblue", Icon: Icon };
    case "ppt":
      return { iconBgColor: "bg-royalblue", Icon: Ppt };
    case "mp4":
    case "avi":
    case "rmvb":
    case "3gp":
    case "mkv":
    case "flv":
    case "mov":
    case "m4v":
    case "thumb":
      return { iconBgColor: "bg-royalblue", Icon: Video };
    // case "html":
    //   return { iconBgColor: "bg-purple", Icon: FileHtml };
    // case "json":
    // case "sql":
    // case "js":
    // case "jsx":
    // case "cpp":
    // case "c":
    //   return { iconBgColor: "bg-warn", Icon: FileCode };
    default:
      return { iconBgColor: "bg-royalblue", Icon: "" };
  }
}
